<script setup>
import { inject, ref } from "vue";
// import stepsview from "../components/steps/steps.vue";
import { useCounterStore } from "@/stores/upgrade";
import { handleGoBack } from "@/utils/router";
import { upgradecreate, upgradeagreeInfo } from "@/services/upfrade";
import { uploadfile } from "@/services/upload";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { base_URL } from "@/utils/http";
import { refundreason, refundcheck, refundcreate } from "@/services/order";

const fileList4 = ref([]);
const uForm = ref(null);
const show = ref(false);
const showtwo = ref(false);
const istype = ref(false);
const fromdate = ref({
  refund_message: "",
  refund_price: "",
  refund_type: 1,
  mark: "",
  pics: [],
  cart: [
    {
      product_id: "",
      product_num: "",
    },
  ],
});
const columns = ref([[]]);
const columnstwo = ref([["仅退款", "退货退款"]]);
const shopobj = ref({});

onLoad((e) => {
  if (e.id) {
    fromdate.value.order_id = e.id;
  }
  if (e.arr) {
    fromdate.value.cart = JSON.parse(e.arr);
  }

  if (e.type) {
    fromdate.value.refund_type = "";
    istype.value = true;
  } else {
    fromdate.value.refund_type = 1;
    istype.value = false;
  }
  getreturnreason();
  refundcheckfn();
});

const getreturnreason = async () => {
  let res = await refundreason();
  // fromdate.value.refund_message = res.data[0]

  columns.value[0] = res.data;
};

const refundcheckfn = async () => {
  try {
    let res = await refundcheck(fromdate.value);
    shopobj.value = res.data;
    fromdate.value.refund_price = res.data.total_price;
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

// 定义方法
function clicktabs(item) {}

const searchfun = () => {
  console.lof(keyword.value);
};

const deletePic4 = (event, type) => {
  let fileList = [];

  fileList = fileList4.value;

  fileList.splice(event.index, 1);
};
const afterRead4 = async (event, type) => {
  let fileListLen = 0;
  let filelist = [];
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

  fileListLen = fileList4.value.length;
  filelist = fileList4.value;

  let lists = [].concat(event.file);
  lists.map((item) => {
    filelist.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });

  // return;
  for (let i = 0; i < lists.length; i++) {
    uni.uploadFile({
      url: base_URL + "/api/upload/file",
      filePath: lists[i].url,
      name: "file",
      formData: {
        user: "test",
      },
      header: {
        Authorization: uni.getStorageSync("Authorization"),
      },
      success: async (uploadFileRes) => {
        let data = JSON.parse(uploadFileRes.data);
        if (data.code == 200) {
          filelist.splice(fileListLen, 1, {
            ...item,
            status: "success",
            message: "",
            url: data.data.url,
          });
          fileListLen++;
        }
      },
      fail: function (e) {
        uni.hideLoading();
      },
    });

    let item = fileList4.value[fileListLen];
  }
};
const selectfuntwo = () => {
  showtwo.value = true;
};

const closefuntwo = () => {
  showtwo.value = false;
};
const confirmfuntwo = (e) => {
  fromdate.value.refund_type = e.indexs[0] + 1;
  showtwo.value = false;
};

const selectfun = () => {
  show.value = true;
};

const closefun = () => {
  show.value = false;
};
const confirmfun = (e) => {
  fromdate.value.refund_message = e.value[0];
  show.value = false;
};

const shoppayfun = async () => {
  if (istype) {
    if (!fromdate.value.refund_type) {
      return uni.showToast({
        title: "请选择售后类型",
        icon: "none",
      });
    }
  }
  if (!fromdate.value.refund_message) {
    return uni.showToast({
      title: "请选择退货原因",
      icon: "none",
    });
  }
  fromdate.value.pics = [];
  fileList4.value.forEach((item, index) => {
    fromdate.value.pics.push(item.url);
  });
  fromdate.value.cart = [];
  shopobj.value.orderProduct.forEach((item, index) => {
    fromdate.value.cart.push({
      product_id: item.product_id,
      product_num: item.product_num,
    });
  });

  try {
    let res = await refundcreate(fromdate.value);

    if (res.code == 200) {
      uni.showToast({
        title: "提交成功",
        icon: "none",
      });
      setTimeout(() => {
        uni.redirectTo({ url: "/pages/order/orderlist/index?status=4" });
      }, 1500);

      // getdetfun();
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
</script>

<template>
  <view class="content">
    <view class="list">
      <view class="list-item">
        <!-- <view class="list-item-title">
          <text>订单编号：49832483231</text>
          <text class="list-item-title">待支付</text>
        </view> -->
        <view class="list-item-content">
          <view
            class="list-item-content-item"
            v-for="(item, index) in shopobj.orderProduct"
            :key="index"
          >
            <view class="list-item-content-img">
              <image :src="item.product_info.image" mode=""></image>
            </view>
            <view class="list-item-content-info">
              <view class="list-item-content-info-title">
                <view class="good-name">
                  <text>{{ item.product_info.store_name }}</text>
                </view>
                <view>
                  <text class="good-name-mr">默认</text>
                </view>
              </view>
              <view class="list-item-price">
                <view>¥{{ item.product_info.price }}</view>
                <view class="good-name-num">x{{ item.product_num }}</view>
              </view>
              <!-- <view class="list-item-btn-item-left-btn">取消订单</view> -->
            </view>
          </view>
          <!-- <view class="list-item-content-item">
            <view class="list-item-content-img">
              <image src="/static/images/1.png" mode="widthFix"></image>
            </view>
            <view class="list-item-content-info">
              <view class="list-item-content-info-title">
                <view class="good-name">
                  <text>经销商升级大礼包套餐商升级大礼升级大礼升级...</text>
                </view>
                <view>
                  <text class="good-name-mr">默认</text>
                </view>
              </view>
              <view class="list-item-price">
                <view>¥2000</view>
                <view class="good-name-num">x1</view>
              </view>

             
            </view>
          </view> -->
        </view>

        <!-- <view class="list-nums">
          <text>共1件, </text>
          <text>总计：</text><text class="list-nums-s">¥2000</text>
        </view>
        <view class="list-item-btn">
          <view class="list-item-btn-item-left">取消订单</view>
          <view class="list-item-btn-item-right">立即支付</view>
        </view> -->
      </view>
    </view>
  </view>

  <u--form>
    <view class="user-form">
      <u-form-item
        required="true"
        label="售后类型"
        prop="name"
        borderBottom
        ref="item1"
        v-if="istype"
      >
        <view
          class="select"
          :class="fromdate.refund_type ? 'isselect' : ''"
          @click="showtwo = true"
          >{{
            fromdate.refund_type == 1
              ? "仅退款"
              : fromdate.refund_type == 2
              ? "退货退款"
              : "请选择"
          }}</view
        >
      </u-form-item>
      <u-form-item
        required="true"
        label="退款原因"
        prop="name"
        borderBottom
        ref="item1"
      >
        <view
          class="select"
          :class="fromdate.refund_message ? 'isselect' : ''"
          @click="selectfun"
          >{{
            fromdate.refund_message ? fromdate.refund_message : "请选择"
          }}</view
        >
      </u-form-item>
      <u-form-item label="退款金额" prop="phone" borderBottom ref="item1">
        <view class="select">¥{{ fromdate.refund_price }}</view>
      </u-form-item>

      <view class="item-line">
        <u-form-item label="备注" prop="card_no" borderBottom ref="item1">
          <u--input
            v-model="fromdate.mark"
            border="none"
            placeholder="请填写"
          ></u--input>
        </u-form-item>
      </view>
    </view>

    <view class="uplade-up">
      <view class="uplade-up-title">上传凭证（{{ fileList4.length }}/6）</view>
      <!-- <up-upload
        :fileList="fileList4"
        @afterRead="
          (val) => {
            afterRead4(val, 4);
          }
        "
        @delete="
          (val) => {
            deletePic4(val, 4);
          }
        "
        name="4"
        multiple
        :maxCount="1"
        width="250"
        height="150"
      >
        <image
          src="@/pages/upgrade/static/icon-3.png"
          mode="widthFix"
          style="width: 254rpx; height: 180rpx"
        ></image>
        <view class="upload-list">营业执照</view>
      </up-upload> -->
      <up-upload
        :fileList="fileList4"
        @afterRead="
          (val) => {
            afterRead4(val, 4);
          }
        "
        @delete="
          (val) => {
            deletePic4(val, 4);
          }
        "
        name="1"
        multiple
        :maxCount="6"
      ></up-upload>
      <!-- <view class="zhanw"></view> -->
    </view>
  </u--form>

  <view class="content-footer">
    <view class="contebt-pays">
      <!-- <view>
        <text>共1件</text>
        <text class="pay-hj">合计:</text>
        <text class="pay-bq">¥</text>
        <text class="pay-num">{{ num }}</text>
      </view> -->
      <!-- <up-button class="pay-bt-xs" text="支付"></up-button> -->
      <view @click="shoppayfun" color="#F3498B" class="pay-bt pay-df"
        >提交</view
      >
    </view>
  </view>
  <up-picker
    :show="show"
    @cancel="closefun"
    @close="closefun"
    :columns="columns"
    @confirm="confirmfun"
  ></up-picker>
  <up-picker
    :show="showtwo"
    @cancel="closefuntwo"
    @close="closefuntwo"
    :columns="columnstwo"
    @confirm="confirmfuntwo"
  ></up-picker>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
